<template>
    <div class="test-page-container">
      <h1>在线测试</h1>
      <!-- 试题展示区域 -->
      <div class="question-area">
        <div v-for="(question, index) in questions" :key="index" class="question-item">
          <p class="question-text">{{ question.question }}</p>
          <div v-if="question.type === 'multiple-choice'" class="choices">
            <el-radio-group v-model="answers[index]">
              <el-radio v-for="choice in question.choices" :key="choice" :label="choice">{{ choice }}</el-radio>
            </el-radio-group>
          </div>
          <div v-if="question.type === 'true-false'" class="true-false-choices">
            <el-radio-group v-model="answers[index]">
              <el-radio label="true">True</el-radio>
              <el-radio label="false">False</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <!-- 提交按钮 -->
      <el-button type="primary" @click="submitTest">开始测试</el-button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        questions: [
          {
            question: '高中（请选择你的课程）',
            type:'multiple-choice',
            choices: ['语文', '数学', '英语','化学','物理','政治','生物','地理','历史']
          },
          {
            question: '大学（请选择你的课程）',
            type:'multiple-choice',
            choices: ['大学语文', '高数', '大学英语','线性代数','毛概','习思想','马克思','web前端可视化分析','springboot企业级开发']
          },
        ],
        answers: []
      }
    },
    methods: {
      submitTest() {
        // 这里可以添加提交答案后的逻辑，比如发送到服务器进行评分等
        console.log('提交的答案:', this.answers)
      }
    }
  }
  </script>
  
  <style scoped>
  .test-page-container {
    padding: 20px;
    height: auto;
    width: 1300px;
    background-color: rgba(83, 123, 139, 0.173);
    margin-left: 180px;
  }
  .question-area {
    margin-bottom: 20px;
  }
  .question-item {
    margin-bottom: 15px;
    border: 1px solid #e4e7ed;
    padding: 10px;
  }
  .choices {
    margin-top: 5px;
  }
  .true-false-choices {
    margin-top: 5px;
  }
  </style>